<template>
  <view class="wrapper">
    <YgSearch />
    <view class="main">
      <view class="left">
        <view
          @click="changeCat(index)"
          class="catItem"
          v-for="(name, index) in catTitleList"
          :key="name"
        >
          <view :class="{active: currentIndex === index}">
            {{ name }}
          </view>
        </view>
      </view>
      <view class="right">
        <SubCat
          v-for="item in subCatList"
          :key="item.cat_id"
          :data="item"
        ></SubCat>
      </view>
    </view>
  </view>
</template>

<script>
  let categoryList = []
  import SubCat from "./components/SubCat.vue";
  export default {
    components: {
      SubCat,
    },
    data() {
      return {
        // categoryList: [],
        catTitleList: [],
        subCatList: [],
        currentIndex: 0,
      };
    },
    onLoad() {
      this.getCategory();
    },
    methods: {
      async getCategory() {
        const { message } = await this.$u.get("/categories");
        categoryList = message;
        this.catTitleList = categoryList.map(item=>item.cat_name)
        this.subCatList = categoryList[this.currentIndex].children
      },
      changeCat(index) {
        this.currentIndex = index
        this.subCatList = categoryList[this.currentIndex].children
      }
    },
  };
</script>

<style lang="scss" scoped>
  .wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    .main {
      flex: 1;
      display: flex;
      overflow: hidden;
      .left {
        width: 182rpx;
        overflow: auto;
        background: #f3f3f3;
        .catItem {
          font-size: 28rpx;
          color: #585858;
          text-align: center;
          padding: 18rpx 0;
        }
        .active {
          border-left: 6rpx solid $theme-color;
          border-right: 6rpx solid transparent;
          color: $theme-color;
          font-weight: bold;
        }
      }
      .right {
        flex: 1;
        overflow: auto;
      }
    }
  }
</style>